.cl-card,
.cl-userButtonPopoverCard {
  @apply border shadow-xl shadow-zinc-500/10 backdrop-blur-xl backdrop-saturate-150;
  @apply border-zinc-200 bg-zinc-50/80 text-zinc-800;
  @apply pointer-events-auto py-4;

  --accent: theme('colors.zinc.900');
  --accentDark: theme('colors.zinc.800');
}

.cl-modalBackdrop {
  @apply flex flex-col items-center justify-center bg-base-100/90;
}

.cl-userButtonPopoverCard {
  @apply w-64;
}

.cl-userButtonPopoverActions {
  @apply mt-1;
}

.cl-userButtonPopoverFooter {
  @apply hidden;
}

.cl-userButtonPopoverCard .cl-userPreview {
  @apply px-4;
}

.cl-formFieldInput {
  @apply bg-transparent text-zinc-800;
}

.cl-userButtonPopoverActionButton {
  @apply gap-1 px-2;
}

.cl-footerActionLink,
.cl-formResendCodeLink {
  @apply text-zinc-900 underline;
}

.cl-formFieldHintText {
  font-size: 12px;
}

.cl-formButtonPrimary {
  @apply bg-accent !text-white;

  &:hover {
    @apply bg-accent/80;
  }
}

.cl-formFieldLabelRow {
  @apply mb-2;
}

.cl-footer + div {
  @apply hidden;
}

.cl-userButtonPopoverCard {
  @apply !pb-0;
}

.cl-userButtonPopoverCard {
  @apply overflow-hidden;
}

.cl-userButtonPopoverActionButton:hover {
  background: theme('colors.zinc.100');
}

.cl-logoBox {
  @apply absolute -top-[30px] left-[50%] m-auto inline-block -translate-x-1/2;
}

.cl-logoBox img {
  @apply h-[60px] w-[60px] overflow-hidden rounded-full;
}

[data-theme='dark'] {
  [class*='cl-internal-'] {
    --accent: theme('colors.zinc.50');
    --accentDark: theme('colors.zinc.200');
    --border: hsla(0, 0%, 100%, 0.08);
    --accentLightest: hsla(0, 0%, 100%, 0.04);
    --accentLighter: hsla(0, 0%, 100%, 0.16);
    --accentDarker: hsla(0, 0%, 100%, 0.64);
  }

  .cl-userButtonPopoverActionButton:hover {
    background: theme('colors.zinc.800');
  }

  .🔒,
  .cl-formField p,
  .cl-formField p[aria-live='polite'],
  .cl-formFieldInputShowPasswordButton {
    @apply text-zinc-400;
  }

  .cl-card,
  .cl-userButtonPopoverCard {
    @apply border-zinc-800 bg-zinc-900/80 text-zinc-200 shadow-zinc-900/20;
  }

  .cl-profileSectionTitleText {
    @apply text-zinc-100;
  }

  .cl-breadcrumbsItem,
  .cl-breadcrumbsItemDivider,
  [data-localization-key],
  .cl-fileDropAreaOuterBox *,
  .cl-profileSectionContent__password p {
    @apply text-zinc-400;
  }

  .cl-navbarButton.cl-active {
    @apply bg-zinc-400/10;
  }

  .cl-navbar {
    @apply border-zinc-800;
  }

  .cl-userPreviewSecondaryIdentifier,
  .cl-headerSubtitle,
  .cl-profileSectionContent__activeDevices p {
    @apply text-zinc-400;
  }

  .cl-headerTitle,
  .cl-socialButtonsBlockButton,
  .cl-alternativeMethodsBlockButton,
  .cl-userButtonPopoverActionButtonIcon,
  .cl-userButtonPopoverActionButtonText {
    @apply text-zinc-200;
  }

  .cl-alternativeMethodsBlockButton
    svg:not(.cl-alternativeMethodsBlockButtonArrow) {
    @apply invert;
  }

  .cl-socialButtonsBlockButton,
  .cl-alternativeMethodsBlockButton {
    @apply rounded-xl border-zinc-500/20;
  }

  .cl-socialButtonsProviderIcon__github,
  .cl-providerIcon__github {
    @apply invert;
  }

  .cl-dividerLine {
    @apply bg-zinc-200/10;
  }

  .cl-dividerText {
    @apply text-zinc-500;
  }

  .cl-formFieldAction {
    @apply text-zinc-200 underline;
  }

  .cl-formFieldLabel {
    @apply text-zinc-400;
  }

  .cl-formFieldInput,
  .cl-identityPreview {
    @apply border-zinc-800 bg-transparent text-zinc-200;
  }

  .cl-footerActionText,
  .cl-formHeaderSubtitle {
    @apply text-zinc-400;
  }

  .cl-footerActionLink,
  .cl-formHeaderTitle,
  .cl-formResendCodeLink {
    @apply text-zinc-100;
  }

  .cl-modalCloseButton {
    @apply text-zinc-200;
  }

  .cl-otpCodeFieldInput {
    @apply border-zinc-700 text-zinc-200;
  }

  .cl-formFieldSuccessText__password,
  .cl-formFieldDirectionsText__password,
  .cl-formFieldHintText__password,
  .cl-formFieldInfoText__password,
  .cl-identityPreviewText {
    @apply text-zinc-400;
  }

  .cl-identityPreviewEditButton {
    @apply text-zinc-200;
  }
}
.cl-card:not(.cl-userButtonPopoverCard) {
  @apply pt-10;
}
.cl-userProfile-root .cl-card .cl-scrollBox + div {
  @apply hidden;
}
